<template>
  <view class="data-summary">
    <view class="data-summary-header">
      <view class="data-summary-title">数据汇总</view>
    </view>
    <view class="data-summary-body">
      <view class="data-summary-box">
        <view class="data-summary-item">
          <view>费用总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.totalAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item">
          <view>付款总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.payAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item">
          <view>收款总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.receivedAmount }}</text>
            <text> 元</text>
          </view>
        </view>
      </view>
      <view class="data-summary-box">
        <view class="data-summary-item">
          <view>OTA对账总额</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.statementTotalAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item">
          <view>佣金</view>
          <view>
            <text class="blue-3072f6 font-600">{{ totalDetailList.commissionAmount }}</text>
            <text> 元</text>
          </view>
        </view>
        <ve-line direction="col" color="#F4F4F4" />
        <view class="data-summary-item"> </view>
      </view>
      <view class="data-summary-box" v-if="totalDetailList.depositInfoList?.length > 0">
        <template v-for="(item, index) in totalDetailList.depositInfoList" :key="item.depositName">
          <view class="data-summary-item">
            <view>{{ item.depositName }}</view>
            <view>
              <text class="blue-3072f6 font-600">{{ item.amount }}</text>
              <text> 元</text>
            </view>
            <ve-tag background="#F2F3F5" :title="item.payTypeName" />
          </view>
          <ve-line v-if="index < totalDetailList.depositInfoList?.length" direction="col" color="#F4F4F4" />
        </template>
        <template v-if="totalDetailList.depositInfoList?.length < 3">
          <ve-line direction="col" color="#F4F4F4" />
          <view class="data-summary-item"> </view>
        </template>
      </view>
      <view class="data-summary-box" v-if="totalDetailList.statementInfoList?.length > 0">
        <template v-for="(item, index) in totalDetailList.statementInfoList" :key="item.feeStatusName">
          <view class="data-summary-item">
            <view>{{ item.feeStatusName }}</view>
            <view>
              <text class="blue-3072f6 font-600">{{ item.totalAmount }}</text>
              <text> 元</text>
            </view>
            <view class="data-summary-cell">
              <text>收款</text>
              <text class="cell-num"> {{ item.collectAmount }} 元</text>
            </view>
            <view class="data-summary-cell">
              <text>付款</text>
              <text class="cell-num"> {{ item.payAmount }} 元</text>
            </view>
          </view>
          <ve-line v-if="index < totalDetailList.statementInfoList?.length" direction="col" color="#F4F4F4" />
        </template>
      </view>
    </view>
  </view>

  <view class="detail-container">
    <ve-card type="blue" v-for="item in feeList" :key="item.id">
      <template #title>
        <view class="card-title-box">
          <view>{{ item.itemName || '-' }}</view>
          <view class="card-title-total">
            <text>总额：</text>
            <text class="blue-3072f6 font-600">{{ item.amount }} 元</text>
            <ve-tag v-if="item.feeStatusName" color="#f53f3f" background="#ffece8" plain :title="item.feeStatusName" />
          </view>
        </view>
      </template>

      <ve-cell label="实结">{{ item.payAmount ?? '-' }} 元</ve-cell>
      <ve-cell label="未结">{{ item.waitPayAmount ?? '-' }} 元</ve-cell>
      <ve-cell label="生成节点">{{ item.createNodeName || '-' }}</ve-cell>
      <ve-cell label="结算人">{{ item.settlementUserName || '-' }}</ve-cell>
      <ve-cell label="结算备注">
        <view class="remark-box">
          {{ item.remark || '-' }}
        </view>
        <view v-if="item.remark" class="link" @click="() => onClickRemark(item)">查看更多</view>
      </ve-cell>

      <view class="tag-box">
        <ve-tag class="ve-tag" color="#3491fa" background="#e8f7ff" plain v-if="item.feeTypeName" :title="item.feeTypeName" />
        <ve-tag class="ve-tag" color="#ff7d00" background="#fff7e8" plain v-if="item.costTypeName" :title="item.costTypeName" />
        <template v-if="item.payTypeNameList?.length > 0">
          <ve-tag
            v-for="payType in item.payTypeNameList"
            :key="payType"
            class="ve-tag"
            color="#722ed1"
            background="#f5e8ff"
            plain
            :title="payType"
          />
        </template>
      </view>
    </ve-card>
  </view>
</template>

<script setup lang="ts">
  import { getShortOrdrFeeDetailAPI, getStatisticsData } from '@/api/order/sOrder'

  import { onMounted, ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })

  const feeList = ref<any[]>([])

  // 数据汇总
  const totalDetailList = ref<any>({})
  const getStatistics = () => {
    getStatisticsData({ orderId: props.orderId }).then((res: any) => {
      const { result } = res
      totalDetailList.value = result
    })
  }

  const onClickRemark = (data: any) => {
    uni.navigateTo({
      url: `/pages/order/short-order/detail/remark-list?id=${data.id}&orderId=${data.orderId}`,
    })
  }

  const getDetail = (id: any) => {
    getShortOrdrFeeDetailAPI({ orderId: id }).then((res: any) => {
      const { result } = res
      feeList.value = result
    })
  }

  onMounted(() => {
    getStatistics()
  })

  onShow(() => {
    if (props.orderId) {
      getDetail(props.orderId)
    }
  })
</script>

<style lang="scss" scoped>
  .blue-3072f6 {
    color: #3072f6;
  }

  .font-600 {
    font-weight: 600;
  }

  .data {
    &-summary {
      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 24rpx;

        .data-summary-title {
          font-weight: 600;
          font-size: 32rpx;
          color: #191c27;
        }
      }

      &-body {
        display: flex;
        flex-direction: column;
        padding: 0 24rpx;

        .data-summary-box {
          display: flex;
          justify-content: space-around;
          padding: 24rpx 24rpx;
          background-color: #fff;
          margin-bottom: 24rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .data-summary-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .data-summary-cell {
              margin-top: 12rpx;
              font-size: 24rpx;
              color: #8491a8;

              .cell-num {
                color: #191c27;
              }
            }
          }
        }
      }
    }
  }

  :deep(.overflow-ellipsis) {
    overflow: hidden;
    flex: 1 1 auto;
  }

  .detail-container {
    padding: 24rpx 24rpx;

    .card {
      &-title {
        &-box {
          display: flex;
          flex-direction: column;
        }

        &-total {
          display: flex;
          align-items: center;

          text {
            margin-right: 16rpx;
          }
        }
      }
    }

    .remark-box {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .link {
      white-space: nowrap;
      width: 128rpx;
      color: #3072f6;
      flex-shrink: 0;
    }

    .tag-box {
      margin: 32rpx 0;
      .ve-tag {
        margin-right: 16rpx;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
</style>
